﻿@model HomeCareLibrary.Models.ArticlesModel
@if (Model != null)
{
    ViewBag.Title = "Article";
    ViewBag.Description = Model.article_meta_desc;
    ViewBag.Keywords = Model.article_meta_key;
}
<div class="col-lg-9 col-sm-9 right_part">
    <div class="title clearfix">
        <h1>Home Care Library</h1>
        <div class="head-searchbox">
            <button class="search_go" type="submit"></button>
            <input type="text" class="form-control" id="Search" placeholder="Search">
        </div>
        <div id="accordion" class="panel-group library-accordion">
            <div class="panel panel-default">
                <div class="panel-heading1">
                    <div id='flyout_menu'>
                        <h4 class="panel-title library ">
                            @Html.Action("menu", "Home")
                        </h4>
                    </div>
                </div>

            </div>
        </div>
    </div>
    @if (Model != null)
    {
        <h3  id="heading1" class="head-tittle">@Model.Feature_name</h3>
          <div class="media_tab">
                        <ul class="nav nav-tabs" id="myTab">
                            <li ><a class="overview_icon ui-link aOverview" id="aOverview" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0);"></a></li>
                            <li><a class="routine_icon ui-link aCare" id="aCare" href="javascript:void(0);" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.rc_task_content.Trim().Replace(" ", "-").ToLower()"></a></li>
                            <li ><a class="q_a_icon ui-link aQuestions" id="aQuestions" href="javascript:void(0)" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.qa_topic.Trim().Replace(" ", "-").ToLower()"></a></li>
                            <li class="active"><a class="articles_icon ui-link aArticles" id="aArticles"  data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0)"></a></li>
                        </ul>
                    </div>
        <div class="main-content" id="myTabContent">
            <div class="main-content-inn">
                <div class="content-tab">
                  
                    <div class="tab-content" >
                        <div class="article_page">
                            <div class="media_rc media_artical ">
                                <p class="media-data">Your <span style="color: #38a2fb;">personalized home care calculator</span> gives you Tasks &amp; Tips for your @Model.Feature_name. And here are some articles about @Model.Feature_name that you might find interesting.</p>
                            </div>
                            <div class="media_rc add_img text-center">
                                <img src="@Url.Content("~/images/add_img2.jpg")" title="" alt="" class="img-responsive">
                            </div>
                            <h3 class="media_artical-head">More @Model.Feature_name Articles...</h3>
                            @foreach (var item in Model.listArtical)
                            {
                                <div class="media_artical media_rc media">
                                    <a class="pull-left ui-link" href="#">
                                        <img alt="" class="media-object" src="@item.article_small_image_icon"></a>
                                    <div class="media-body">
                                        <h4 class="media-heading">@item.article_title</h4>
                                        <span class="media-data">@Html.Raw(item.article_summary)</span>
                                        <span class="media-more">
                                            @if (item.article_video == null)
                                            {
                                           
                                                <a href="@Url.Action("articles", "Home", new { ID = item.Feature_name.Trim().Replace(" ", "-").ToLower(), featureID = item.article_title.Trim().Replace(" ", "-") })" class="ui-link">more <small>&#9654;</small></a>
                                            }
                                            else
                                            {
                                           
                                                <a href="@Url.Action("articles", "Home", new { ID = item.Feature_name.Trim().Replace(" ", "-").ToLower(), featureID = item.article_title.Trim().Replace(" ", "-") })" class="ui-link">more <small>&#9654;</small></a>
                                            }
                                        </span>
                                    </div>
                                </div>
                            }
                            <div class="media_rc add_img text-center">
                                <img src="@Url.Content("~/images/add_img1.png")" title="" alt="" class="img-responsive">
                            </div>
                            <div class="visible-phone sponsor_data sponsor_data-btm">
                                @{ if (Session[HomeCareLibrary.Constants.SessionConstants.PROMO_CODE] != null)
                          {

                              Html.RenderPartial("SponsorDetailMobileView");
                          }
                        }
                            </div>
                            <div class="app-iphone-add text-center visible-phone">
                                <img class="img-responsive" alt="" title="" src="@Url.Content("~/images/free apps mobile version.png")">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom_main">
                <h4 id="heading2">@Model.Feature_name</h4>
                 <div class="menu_link"><a data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0);" class="ui-link aOverview">Overview</a>|<a href="javascript:void(0)" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.rc_task_content.Trim().Replace(" ", "-").ToLower()" class="ui-link aCare">Routine Care</a>|<a href="javascript:void(0);" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.qa_topic.Trim().Replace(" ", "-").ToLower()" class="ui-link aQuestions">Q &amp; A</a>|<a data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0)" class="ui-link aArticles">Articles</a> </div>
            </div>
            <div class="title_btm">
                <h2>Home Care Library</h2>
                <div class="panel-title library ">
                    <a class="accordion-toggle collapsed" href="#">
                        <img src="@Url.Content("~/images/explore-library.png")" class="img-responsive">
                    </a>
                </div>
                <div class="head-searchbox">
                    <button type="submit" class="search_go"></button>
                    <input type="text" placeholder="Search" id="Search" class="form-control">
                </div>
            </div>
        </div>
    }
</div>
<script>
    $(".aOverview").live("click", function () {
        $("#wait").show();
        $("#myTab").show();
        $("#heading1").show();
        var ID = $(this).attr("data-name");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/overview");
        document.title = "Overview";
        jQuery.ajax({
            url: "@Url.Action("overview", "Home")", type: "POST", traditional: true,
            data: { 'id': ID },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aCare").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/care/" + task);
        document.title = "Routine";
        jQuery.ajax({
            url: "@Url.Action("care", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".care").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/care/" + task);
        document.title = "Routine";
        jQuery.ajax({
            url: "@Url.Action("care", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aQuestions").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/questions/" + task);
        document.title = "Questions";
        jQuery.ajax({
            url: "@Url.Action("questions", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".questions").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/questions/" + task);
        document.title = "Questions";
        jQuery.ajax({
            url: "@Url.Action("questions", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aArticles").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/articles/");
        document.title = "Articles";
        jQuery.ajax({
            url: "@Url.Action("articles", "Home")", type: "POST", traditional: true,
            data: { 'id': ID },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".articles").live("click", function () {
        $("#wait").show();
        $("#myTab").hide();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").hide();
        window.history.pushState("", "Title", "/" + ID + "/articles/" + task);
        document.title = "Articles";
        jQuery.ajax({
            url: "@Url.Action("articles", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
                $("#myTab>li:first").addClass('active').siblings().removeClass('active')

            }
        })
    });

</script>